import {Component, OnInit} from "@angular/core";
import {FormBuilder, Validators} from "@angular/forms";
import {Hero} from "./hero";

@Component({
  selector: 'docs-reactive-form',
  templateUrl: './docs-reactive-form.component.html'
})
export class DocsReactiveFormComponent implements OnInit {
  heroForm
  formErrors = {
    name: ''
  }

  private heroPowers = ['Really Smart', 'Super Flexible', 'Super Hot', 'Weather Changer']
  private hero = new Hero(42, "SkyDog", this.heroPowers[1], 'Leslie Rollover')

  submitted = false

  constructor(private _fb: FormBuilder) {

  }

  ngOnInit() {
    this.buildForm()
  }

  buildForm() {
    this.heroForm = this._fb.group({
      'name': [this.hero.name, [Validators.required, Validators.minLength(4), Validators.maxLength(24)]],
      'alterEgo': [this.hero.alterEgo],
      'power': [this.hero.power, Validators.required]
    })
    this.heroForm.valueChanges.subscribe(value => this.onValueChanged(value))
    this.onValueChanged()
  }

  onValueChanged(value?) {

  }

  onSubmit() {
    this.submitted = true
    this.hero = this.heroForm.value
  }
}